<template>
	<view class="tbody">
		<view v-for="item in rows" :key="item.id" @click="navigator(item.id)">
			<!-- <view  @click="navigator(item.id,item.state)" v-for="item in rows" :key="item.id">		 -->
			<view class="articleBox" style="position: relative;">
				<image :src='item.images' mode="" class="articleBox-image" />
				<view class="articleBox-box">
					<!-- 标题 -->
					<view class="headline">
						{{item.createName}}
					</view>
					<!-- 文章内容 -->
					<text class="text">
						{{item.content}}
					</text>
					<!-- 学习人数 时间 -->
					<view class="state">
						<!-- 学习人数 -->
						<view class="state-left">

						</view>
						<view class="state-right">
							<!-- 发布人 -->
							<view class="state-right-one">
								<image src="/static/images/我的@2x.png" mode="" />
								<text class="state-right-one-name"
									style="margin-right: 20rpx;">{{item.createName}}</text>
							</view>
							<!-- 时间 -->
							<view class="state-right-one">
								<image src="../../static/images/时间@2x.png" mode="" style="margin-right: 6rpx;"></image>
								<text class="state-right-one-name">{{item.createTime}}</text>
							</view>
						</view>
					</view>
				</view>
				<!-- 0审核中 -->
				<image v-if="item.state==='0'"
					src="https://www.anhuimiller.com:441/profile/upload/appimg/status_icon/shz.png" mode="" class="image">
				</image>
				<!-- 1审核通过 -->
				<image v-else="item.state==='1'"
					src="https://www.anhuimiller.com:441/profile/upload/appimg/status_icon/ytg.png" mode="" class="image">
				</image>
				<!-- 2已驳回 -->
				<image v-else="item.state==='2'"
					src="https://www.anhuimiller.com:441/profile/upload/appimg/status_icon/ybh.png" mode="" class="image">
				</image>
			</view>
		</view>

		<!-- 添加盒子 -->
		<view class="add" v-show="keybl">
			<view class="add-y">
				<view @click="addy">
					<image src="https://www.anhuimiller.com:441/profile/upload/appimg/status_icon/jiahao.png" mode="">
					</image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				key: uni.getStorageSync('roleKey'),
				rows: [],
				total: 10,
				page_data: {
					pageNum: 1,
					pageSize: 10
				}
			};
		},
		computed: {
			// 判断是不是管理员，是管理员就返回一个false，不是就返回一个true
			keybl() {
				if (this.key === 'manager') {
					return false
				} else {
					return true
				}
			}
		},
		onShow() {
			this.contribution()
		},
		// 上拉加载
		onReachBottom() {
			//触发了上拉加载，请求下一页（10）条数据
			console.log('刷新数据');
			let allTotal = this.page_data.pageNum * this.page_data.pageSize
			if (allTotal < this.total) {
				// 判断当前条数小于总条数
				this.page_data.pageNum++
				this.contribution('/business/contribution/list')
			} else {
				uni.showToast({
					title: '已加载全部数据',
					icon: 'none'
				})
			}

		},
		methods: {
			addy() {
				uni.navigateTo({
					url: '/pages/contribution/uploading/uploading'
				})
				this.rows = []
			},
			// 点击跳转查看列表详情id，把id带到下个页面
			navigator(id) {
				uni.navigateTo({
					url: `/pages/bossContribution/bossContribution?id=${id}`,
				})
				this.rows = []
			},
			// 发送请求渲染列表
			async contribution(url) {
				const res = await uni.$http.get('/business/contribution/list', {
					params: this.page_data
				})
				this.rows = []
				// 判断有没有返回图片，有图片就是数组没有就是null
				res.data.rows.forEach((item, index) => {
					if (item.images === null) {
						// 没有图片，默认显示图片路径
						item.images = '/static/images/微信图片_20230331151627.jpg@2x.png'

					} else {
						// 把字符串转数组
						const array = item.images.split(',')
						const url = this.$store.state.user.URL
						item.images = url + array[0]
					}
					item.content = item.content.replace(/<\/p><p>/g, "   "); // 每段p标签中间加段空格
					item.content = item.content.replace(/<[^>]*>/g, "");
					this.rows.push(item)
				})
				console.log('-----------')
				console.log(this.rows)

				this.total = res.data.total
			}
		}
	}
</script>

<style lang="scss">
	.image {
		position: absolute;
		top: 0;
		right: 0;
		width: 80rpx;
		height: 32rpx;
	}

	.add {
		position: fixed;
		width: 750rpx;
		left: 0;
		bottom: 0;
		height: 96rpx;
		background: rgba(235, 252, 255, 1);
		box-shadow: 0px -1px 2px 0px rgba(22, 193, 219, 0.1);

		.add-y {
			box-sizing: border-box;
			width: 112rpx;
			height: 112rpx;
			border-radius: 30px;
			background: rgba(22, 193, 219, 1);
			box-shadow: 0px 0px 0px 0px rgba(22, 193, 219, 0.2), 0px 1px 2px 0px rgba(22, 193, 219, 0.2), 0px 3px 3px 0px rgba(22, 193, 219, 0.17), 0px 7px 4px 0px rgba(22, 193, 219, 0.1), 0px 13px 5px 0px rgba(22, 193, 219, 0.03), 0px 20px 5px 0px rgba(22, 193, 219, 0);
			margin: 0 auto;
			transform: translate(0, -44rpx);
			text-align: center;
			padding: 24rpx;

			image {
				width: 64rpx;
				height: 64rpx;
				color: rgba(235, 252, 255, 1);
			}
		}
	}
</style>